<template>
  <div class="s-card1" :style="byrefValue()">
    <p>{{ pram.title }}</p>
  </div>
</template>

<script lang="ts" setup>
import { CardSH1Pojo } from "@renderer/store/components/cards/card-show-type1";
import style from "@renderer/utils/styleTools";

// 定义接口
const props = defineProps({
  pram: {
    type: CardSH1Pojo,
    required: false,
    default: () => new CardSH1Pojo(),
  },
});

const byrefValue = () => {
  return `--bg-color: ${props.pram.bgColor}; --shadow-color: ${style.colorrgba(
    props.pram.bgColor,
    0.25
  )};`;
};
</script>

<style lang="scss" scoped>
// $local-bg-color: #1b70c5e3;

.s-card1 {
  @include relative;
  @include gglass-t1();
  width: 150px;
  height: 200px;
  cursor: pointer;
  transition: all 0.7s ease-in-out;
  overflow: hidden;
  color: #333;
  flex-direction: column;
  z-index: 1;

  &::before {
    content: "";
    position: absolute;
    height: 40%;
    width: 100%;
    background-color: var(--bg-color);
    bottom: 0;
    right: 0;
    transform: translatey(70px);
    border-radius: 100%;
    transition: all 0.7s ease-in-out;
  }

  &:hover::before {
    transform: scale(7) translate(-20px);
  }

  &:hover {
    box-shadow: 1px -10px 100px 100px var(--shadow-color);
    color: #f3f3f3;
  }
}
</style>
